<template>
  <div class="help">
    <div class="help-hd">
      <div class="h1-tip">服豆APP常见问题</div>
      <div class="h6-tip">2018-10-22更新</div>
    </div>
    <div class="help-doc">
      <div class="help-doc-line" v-for="item in dataList" :key="item.id">
        <div class="top">
          <span class="key-button key-button-gray">Q</span>
          <div class="txt">
            {{item.title}}
          </div>
        </div>
        <div class="bottom">
          <span class="key-button">A</span>
          <div class="txt">
            {{item.answer}}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'index',
  data () {
    return {
      dataList: []
    }
  },
  created () {
    document.title = '常见问题'
    this.$fetch({
      url: '/sys/issues?pageNo=1&pageSize=99999999'
    }).then(res => {
      if (res.code === 200) {
        this.dataList = res.data
      }
    }).catch(e => {
      this.$tipMessage('获取QA数据失败')
    })
  }
}
</script>

<style scoped lang="less">
.help-hd{
  padding: .28rem .28rem 0 .28rem;
}
.h1-tip{
  font-size: .32rem;
}
.h6-tip{
  font-size: .2rem;
  color: #999;
  margin-top: .1rem;
}
.help{
  .help-doc{
    padding: 0 .28rem;
  }
  .key-button{
    width: .42rem;
    height: .42rem;
    display: inline-block;
    background: #F13535;
    border-radius: 4px;
    font-size: .32rem;
    text-align: center;
    line-height: 1.4;
    text-indent: -.04rem;
    color: #fff;
    &.key-button-gray{
      background: #333645;
    }
  }
}
  .help-doc-line{
    font-size: .32rem;
    padding: .32rem 0;
    .top,.bottom{
      display: flex;
      word-break: break-all;
    }
    .txt{
      flex-basis: 90%;
      box-sizing: border-box;
      padding-left: .2rem;
    }
    .bottom{
      margin-top: .2rem;
      font-size: .2rem;
      color: #999;
    }
    &:not(:last-child) {
      border-bottom: 1px solid #eee;
    }
  }
</style>
